<template>
  <codemirror
    :placeholder="editorPlaceholder"
    :style="{ height: editorHeight+'px' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tabSize="tabSize"
    :extensions="extensions"
    :scrollbarStyle="null"
    @change="emit('change',$event)"
  />
</template>

<script setup>
import { Codemirror } from 'vue-codemirror';
import { java } from '@codemirror/lang-java';
import { defineEmits, ref, defineProps, computed } from 'vue';

const extensions = ref(java());
const emit = defineEmits();
const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  editorPlaceholder: {
    type: String,
    default: '请输入代码'
  },
  editorHeight: {
    type: String,
    default: '300'
  },
  tabSize: {
    type: Number,
    default: 2
  }
});
const _value = computed({
  get() {
    return props.value || '';
  },
  set(value) {
    emit('update:value', value);
  }
});
</script>
<style scoped lang="scss">
.sql-format {
  background-color: #f7f7f7;
  text-align: right;
  color: #2a99ff;
  padding: 10px;

  span:hover {
    cursor: pointer;
    text-decoration: underline;
  }

  > span:first-child {
    margin-right: 10px;
  }
}
</style>
